<template>
  <splitpanes class="default-theme">
    <pane size="20" :min-size="0" max-size="50">
<!--      <lab-tree ref="treeRef" :conf="methodTree" :load-data="loadMethod" @click="treeClick"></lab-tree>-->
      <method-table ref="tableRef" @rowClick="methodClick"></method-table>
    </pane>
    <pane size="80" :min-size="0" max-size="100">
      <h3 v-if="tabs.length === 0">未打开函数</h3>
      <el-tabs v-else v-model="activeName" type="border-card" closable @tab-remove="removeTab">
        <el-tab-pane v-for="item in tabs" :key="item.methodId" :name="item.methodId" :label="item.label">
          <method-info :method-id="item.methodId" @save="$refs.tableRef.loadSource()"></method-info>
        </el-tab-pane>
      </el-tabs>
    </pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import '@/theme/splitpanes.css'
import MethodTable from "@/views/system/method/MethodTable";
import MethodInfo from "@/views/system/method/MethodInfo";
export default {
  name: "MethodManage",
  components: { MethodInfo, MethodTable,Splitpanes, Pane},
  data() {
    return {
      tabs: [],
      activeName: ''
    }
  },
  methods: {
    methodClick(row){
      const index = this.tabs.findIndex(item => item.methodId === row.methodId)
      if (index < 0) {
        this.tabs.push({ label: row.methodName, methodId: row.methodId })
      }
      this.activeName = row.methodId
    },
    removeTab(key) {
      this.tabs = this.tabs.filter(tab => tab.methodId !== key)
      if (this.tabs.length > 0) {
        this.activeName = this.tabs[0].methodId
      }
    }
  }
}
</script>

<style lang="scss">
.lab-tab {
  .el-tabs__new-tab {
    background-color: #67c23a;
    width: 28px;
    height: 28px;
    font-size: 28px;
    margin: 5px 8px 8px 10px;
  }
}
</style>
